<template>
  <div>
    <div class="epuipcatvi_cont">
      <div class="epuipcatvi_serch">
        <el-form class="table_serch">
          <div class="table_serch_labe" style="margin-left: 0px">
            <div class="table_serch_labe_title">线体</div>
            <el-select
              v-model="formInline.line"
              clearable
              @change="onLinecheng"
              size="mini"
              style="margin-left: 5px; margin-top: 8px; width: 140px"
              placeholder="请选择内容"
            >
              <el-option
                v-for="(item, index) in linedroplist"
                :key="index"
                :label="item.LINE_ID"
                :value="item.LINE_ID"
              ></el-option>
            </el-select>
          </div>

          <div class="table_serch_labe" style="margin-left: 10px">
            <div class="table_serch_labe_title">设备</div>
            <el-select
              v-model="formInline.site"
              clearable
              size="mini"
              style="margin-left: 5px; margin-top: 8px; width: 140px"
              placeholder="请选择内容"
            >
              <el-option
                v-for="(item, index) in this.stepdrwn"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </div>

          <div class="table_serch_labe" style="margin-left: 10px">
            <div class="table_serch_labe_title">起始时间</div>
            <el-form-item label="" style="margin-left: 10px">
              <el-date-picker
                size="mini"
                style="width: 160px"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="formInline.beg_time"
                type="datetime"
                :picker-options="pickerOptions1"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </div>

          <div class="table_serch_labe" style="margin-left: 10px">
            <div class="table_serch_labe_title">结束时间</div>
            <el-form-item label="" style="margin-left: 10px">
              <el-date-picker
                size="mini"
                style="width: 160px"
                value-format="yyyy-MM-dd HH:mm:ss"
                v-model="formInline.end_time"
                type="datetime"
                :picker-options="pickerOptions1"
                placeholder="选择日期时间"
              >
              </el-date-picker>
            </el-form-item>
          </div>

          <div class="table_serch_labe">
            <div class="table_serch_labe_title" style="">片数</div>
            <el-input
              size="mini"
              style="margin-top: 6px; width: 130px; margin-left: 5px"
              placeholder="请输入缺陷片数"
              v-model="input"
              clearable
            >
            </el-input>
          </div>

          <div class="uplod_btn">
            <el-upload
              class="upload-demo"
              ref="upload"
              :limit="limitNum"
              accept=".xlsx"
              action="#"
              :data="this.formInline"
              multiple
              :before-upload="beforeUpload"
              :http-request="uploadFile"
              :on-success="handleImageSuccess"
              :on-preview="handlePreview"
              :on-exceed="handleExceed"
              :on-remove="handleRemove"
              :on-change="handleChange"
              :file-list="formInline.fileList"
              :auto-upload="false"
            >
              <el-button
                size="small"
                style="height: 30px; margin-top: 10px"
                class="el-upload__tip"
                type="primary"
                >上传产品二维码</el-button
              >
            </el-upload>
          </div>

          <div style="margin-top: 5px; margin-left: 3px">
            <Dowtemplte :DowUrl="DowUrl"></Dowtemplte>
          </div>

          <div class="table_serch_labe">
            <el-button
              type="primary"
              size="mini"
              style="height: 30px; margin-top: 5px"
              @click="equiacviyclick"
              >查询</el-button
            >
          </div>
        </el-form>
      </div>
      <div class="epuipcatvi_hader">
        <div></div>
        <el-table
          :data="items"
          border
          :header-cell-style="headClass"
          :span-method="objectSpanMethod"
          size="mini"
          style="width: 100%"
        >
          <el-table-column prop="line" label="线体" width="80">
          </el-table-column>
          <el-table-column prop="eqp" label="设备" width="115">
          </el-table-column>
          <el-table-column prop="code" label="缺陷" width="150">
          </el-table-column>
          <el-table-column prop="count" label="片数" width="150">
          </el-table-column>
          <el-table-column label="缺陷占比">
            <template slot-scope="scope">
              <el-progress
                :stroke-width="20"
                :text-inside="true"
                :color="colorfuntion(scope.row.count)"
                :format="_format(scope.row.average)"
                :percentage="scope.row.average"
              ></el-progress>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
// import Linedrpdown from "../../../components/Linedropdown/Linedropdown";
import Dowtemplte from "../../../components/Dowtemplate/Dowtemplate";
export default {
  components: {
    Dowtemplte,
    // Defectoptions
    // Linedrpdown,
  },
  data() {
    return {
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的
        },
      },
      DowUrl: "/file/local?filename=templates/1029.xlsx",
      linedroplist: [],
      limitNum: 1,
      stepdrwn: [],
      formData: "",
      theme: "上传表格",
      formInline: {
        line: "",
        site: "",
        beg_time: "",
        end_time: "",
        filename: "",
      },
      input: "",
      items: [],
    };
  },
  mounted() {
    this.getModelnolist();
  },
  methods: {
    gettser() {},

    // 表头样式设置
    headClass() {
      return "text-align: center;background:#696969;color:#fff";
    },

    ////表格合并
    flitterData(arr) {
      let spanOneArr = [];
      let sapnTwoArr = [];
      let concatOne = 0;
      let concatTwo = 0;
      arr.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1);
          sapnTwoArr.push(1);
        } else {
          //name 修改
          if (item.line === arr[index - 1].line) {
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }

          if (item.eqp === arr[index - 1].eqp) {
            sapnTwoArr[concatTwo] += 1;
            sapnTwoArr.push(0);
          } else {
            sapnTwoArr.push(1);
            concatTwo = index;
          }
        }
      });
      return {
        one: spanOneArr,
        two: sapnTwoArr,
      };
    },
    ///表格合并
    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        // this.tableData  修改
        const _row = this.flitterData(this.items).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }

      if (columnIndex === 1) {
        const _row = this.flitterData(this.items).two[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },

    getModelnolist() {
      this.ajax(`func/1023/selProductList`).then((res) => {
        if (res.status == 200) {
          this.linedroplist = res.data.line;
        }
      });
    },

    ///获取线体后 调获取设备接口
    onLinecheng() {
      let Line = {
        line: this.formInline.line,
      };
      var onyline = JSON.stringify(Line);
      this.ajax.get(`func/1029/selEqpList?params=${onyline}`).then((res) => {
        if (res.status == 200) {
          this.stepdrwn = res.data;
        }
      });
    },

    _format(value) {
      return () => {
        return value + "%";
      };
    },

    colorfuntion(value) {
      console.log(value);
      if (this.input == "") {
        return "";
      } else if (value >= this.input) {
        return "red";
      } else {
        return "";
      }
    },

    ///请求方法
    equiacviyclick() {
      if (this.formInline.beg_time == "") {
        this.$message({
          showClose: true,
          message: "起始日期不能为空",
          type: "warning",
        });
      } else if (this.formInline.end_time == "") {
        this.$message({
          showClose: true,
          message: "结束日期不能为空",
          type: "warning",
        });
      } else if (this.formInline.filename == "") {
        this.$message({
          showClose: true,
          message: "必须上传PNL_ID,DFT_CODE",
          type: "warning",
        });
      } else {
        this.ajax
          .get(
            `prod/1029?line=${this.formInline.line}&site=${this.formInline.site}&beg_time=${this.formInline.beg_time}&end_time=${this.formInline.end_time}&filename=${this.formInline.filename}`
          )
          .then((res) => {
            // console.log(res.data)
            if (res.status == 200) {
              this.items = res.data;
              if (this.items.length) {
                var arr = [];
                for (let i = 0; i < this.items.length; i++) {
                  arr.push(this.items[i].count);
                }
                var manval = Math.max(...arr);
                this.items.forEach((ele) => {
                  var average = (ele.count / manval) * 100;
                  var num = average.toFixed(2);
                  ele.average = Number(num);
                });
              } else {
                this.$message({
                  showClose: true,
                  message: "数据返回为空，请重新重新请求",
                  type: "error",
                });
                setTimeout(() => {
                  this.$router.go(0);
                }, 300);
              }
            }
          });
      }
    },

    // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
    beforeUpload(file) {
      let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
      let size = file.size / 1024 / 1024;
      if (extension !== "xlsx") {
        this.$message.warning("只能上传后缀是.xlsx的文件");
      }
      if (size > 10) {
        this.$message.warning("文件大小不得超过10M");
      }
    },
    // 文件状态改变
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
      this.formInline.filename = file.name;
      this.uploadfiles();
    },
    handleImageSuccess(res, file, fileList) {
      console.log(file);
      console.log(res);
      console.log(fileList);
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.formInline.filename = "";
      // this.formInline.fileList.shift();
      this.fileList.shift();
    },

    handlePreview(file) {
      console.log(file);
    },
    uploadFile(file) {
      this.formData.append("file", file.file);
    },
    // 文件超出个数限制
    handleExceed(files, fileList) {
      this.$message.warning(
        `只能选择 ${this.limitNum} 个文件，当前共选择了 ${
          files.length + fileList.length
        } 个`
      );
    },

    //上传文件接口
    uploadfiles() {
      let files = new FormData();
      files.append("theme", this.theme);
      for (let i = 0; i < this.fileList.length; i++) {
        files.append("files", this.fileList[i].raw);
      }
      this.ajax.post("upload", files, {}).then((res) => {
        // console.log(res);
        if (res.status == 200) {
          this.$message({
            message: "文件上传成功",
            type: "success",
          });
        }
      });
    },
  },
};
</script>

<style  scoped>
.epuipcatvi_cont {
  width: 100%;
}
.epuipcatvi_serch {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 0px 1.5px #c9c8c8;
  border-radius: 5px 5px 5px 5px;
}

.table_serch {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.table_serch_labe {
  /* border:1px solid #000; */
  height: 40px;
  display: flex;
  margin-left: 10px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.table_serch_labe_title {
  font-size: 11px;
  line-height: 40px;
}

.epuipcatvi_hader {
  width: 100%;
  background: #ffffff;
  box-shadow: 0px 0px 0px 1.5px #c9c8c8;
  border-radius: 5px 5px 5px 5px;
  /* border: 1px solid #000; */
  margin-top: 30px;
}
</style>